<template>
  <div class="classifier">
    <!-- <div class="left-box bg-dark"> -->
    <div class="list-group">
      <a class="list-group-item list-group-item-action disabled bg-dark" style="color: white;">其他分类</a>
      <a @click.prevent="sendCategory('眉笔')" href="#" class="list-group-item list-group-item-action bg-dark">眉笔 | Eyebrow pencil</a>
      <a @click.prevent="sendCategory('隔离')" href="#" class="list-group-item list-group-item-action bg-dark">隔离 | quarantine</a>
      <a @click.prevent="sendCategory('防晒')" href="#" class="list-group-item list-group-item-action bg-dark">防晒 | Sunscreen</a>
      <a @click.prevent="sendCategory('散粉')" href="#" class="list-group-item list-group-item-action bg-dark">散粉 | Loose powder</a>
      <a @click.prevent="sendCategory('粉底液')" href="#" class="list-group-item list-group-item-action bg-dark">粉底液 | Liquid foundation</a>
      <a @click.prevent="sendCategory('睫毛膏')" href="#" class="list-group-item list-group-item-action bg-dark">睫毛膏 | Eye black</a>
      <a @click.prevent="sendCategory('洗面奶')" href="#" class="list-group-item list-group-item-action bg-dark">洗面奶 | Facial cleanser</a>
      <a @click.prevent="sendCategory('面部精华')" href="#" class="list-group-item list-group-item-action bg-dark">面部精华 | Facial essence</a>
    </div>
    <!-- </div> -->
    <div class="right-box bg-dark">
      <div>
        <a @click.prevent="sendCategory('口红')" href="#">
          <img
            src="../../../assets/images/口红1.jpg"
            alt="Image 1"
          />
          <span class="image-description">口红&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Lipstick</span>
        </a>
      </div>
      <div>
        <a @click.prevent="sendCategory('水乳')" href="#">
          <img
            src="../../../assets/images/水乳3.jpg"
            alt="Image 2"
          />
          <span class="image-description">水乳&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Water emulsion</span>
        </a>
      </div>
      <div>
        <a @click.prevent="sendCategory('眼影')" href="#">
          <img
            src="../../../assets/images/liebie1.png"
            alt="Image 3"
          />
          <span class="image-description">眼影&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Face cream</span>
        </a>
      </div>
    </div>
  </div>
  <div class="xiamian">
      
  </div>
  <div class="xiamian">
      
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ClassifierComponent",


  methods: {
    // 发送选中的商品分类到后端
    sendCategory(category) {
      this.$router.push({ path: `/ProductDetails/${category}` }); // 编程方式跳转到 Another 页面
      axios
        .post("http://localhost:8000/api/hotstore/", {
          category: category, // 将商品分类作为请求参数发送
        })
        .then((response) => {
          // 如果请求成功，输出成功信息和后端返回的数据
          console.log("商品分类发送成功:", response.data);
        })
        .catch((error) => {
          // 如果请求失败，输出错误信息
          console.error("发送商品分类时发生错误:", error);
        });
    },
  },
};
</script>


<style scoped>
.classifier {
  display: flex;
  height: 380px;
  background-color: #00000091;  
  margin: 0 5%;
}

.classifier::after {
  content: ""; /* 清除浮动 */
  display: table; /* 清除浮动 */
  clear: both; /* 清除浮动 */
}

.list-group {
  width: 458px;
  height: 366px;
  margin: 0.5em 0.5em;
}

.left-box {
  width: 458px;
  height: 366px;
  float: left;
  margin: 0.5em 0.5em;
}

.right-box {
  display: flex;
  width: 100%;
  height: 366px;
  margin: 0.5em;
  padding: 5px;
}

.right-box img {
  width: 380px;
  height: 310px;
  margin: 5px; /* 调整这里的数值来控制图片之间的间距 */
}

.image-description {
  display: block;
  color: white;
  font-size: 18px;
  width: 380px !important;
  margin: 0 5px;
  padding-left: 25%;
  /* background-color: #aa0000; */
}

a {
  text-decoration: none;
  color: white;
}

.xiamian {

  height: 380px;
  /* background-color: #00000091; */
  margin: 10px 5%;
}
.zhixie {
  height: 380px;
  width: 100%;
  /* background-color: #00000091; */
  /* margin: 10px 5%; */
}

.xiamian {
  display: flex;
  height: 380px;
  /* background-color: #00000091;   */
  margin: 5px 5%;
}

.xiamian::after {
  content: ""; /* 清除浮动 */
  display: table; /* 清除浮动 */
  clear: both; /* 清除浮动 */
}
</style>